<template>
  <view class="animated fadeIn faster">
    <view class="p-3">
      <view class="bg-fff p-3 rounded15 mb-3">
        <view class="d-flex">
          <image class="rounded10 mr-2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/chapter.png"
                 style="width: 130rpx;height: 130rpx;"></image>
          <view class="d-flex-item d-flex py d-flex-middle">
            <view class="text-clamp-two">
              <text class="font32">{{ cate.category_name }}</text>
            </view>
            <!-- <view class="d-flex d-flex-middle d-flex-between">
              <text class="color999 font24">长期</text>
              <text class="colorred">￥134</text>
            </view> -->
          </view>
        </view>
      </view>
      <view class="py-3 bg-fff d-flex d-flex-wrap rounded15 mb-2" style="padding-left: 15rpx;padding-right: 15rpx;">
        <view class="vip-box" v-for="(item,index) in cashList" :key="item.id">
          <view class="vip-item" @click="changePayItem(index)" :class="{'vip-item-on':payIndex == index}">
            <view class="d-flex d-flex-center mb-2">{{ item.name }}</view>
            <view class="d-flex d-flex-center mb-3">
              <view class="d-flex d-flex-baseline">
                <text class="font24 font-bold">￥</text>
                <text class="font40 font-bold">{{ item.price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bg-fff p-3 rounded15">
        <view class="font30 font-bold mb-3">支付方式</view>
        <view class="d-flex d-flex-between d-flex-middle mb-3" @click="changePay(1)">
          <view class="d-flex d-flex-middle">
            <image class="rounded"
                   src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228140259-f541dd69-c75e-43ad-a9e9-7aa92250dc3c.png"
                   style="width: 50rpx;height: 50rpx;"></image>
            <text class="ml-1">微信支付</text>
          </view>
          <text class="iconfont" :class="payType == 1?'icon-xuanzhong1 colorsuccess':'icon-gouxuan1 color999'"></text>
        </view>

        <view class="d-flex d-flex-between d-flex-middle" @click="changePay(2)">
          <view class="d-flex d-flex-middle">
            <image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/pay_wap.png"
                   style="width: 50rpx;height: 50rpx;"></image>
            <text class="ml-1 mr-1">余额支付</text>
            <!-- <text class="font22 colorhold">￥{{ balance }}</text> -->

          </view>
          <text class="iconfont" :class="payType == 2?'icon-xuanzhong1 colorsuccess':'icon-gouxuan1 color999'"></text>
        </view>
      </view>
    </view>

    <view class="position-fixed bottom-0 left-0 right-0 bg">
      <view class="d-flex d-flex-center pt-3 pb-5">
        <view class="kaitong d-flex d-flex-center d-flex-middle" @click="createOrder">
          <text class="colorfff font32">立即开通</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {userApi} from '@/http/userApi.js'
import {payApi} from '@/http/payApi.js'
import pay from '@/mixins/pay.js'

export default {
  mixins: [pay],
  data() {
    return {
      cate: {
        category_id: '',
        category_name: '未知'
      },
      payIndex: 0,
      cashList: [],
      vipUrl: '',
    }
  },
  onLoad(e) {
    let that = this
    if (e && e.cate) {
      let cate = JSON.parse(decodeURIComponent(e.cate))
      if (!cate.vip) {
        that.cate = cate
        that.getCashList()
        that.vipUrl = ''
      } else {
        that.vipUrl = 'vipUrl'
        that.cate = {
          category_id: cate.category_id,
          category_name: cate.category_name
        }
        that.getCashList()
      }
    } else {
      uni.showToast({
        title: '请选择题库',
        icon: 'none'
      })
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/orderConfirmation/orderConfirmation'
        })
      }, 1000)
    }

  },
  methods: {
    getCashList() {
      userApi.cashList().then((res) => {
        this.cashList = res
        console.log('cashList', res)
      }).catch((e) => {

      })
    },
    createOrder() {
      let that = this
      let categoryId = that.cate.category_id
      let casingId = that.cashList[that.payIndex].id
      uni.showLoading({
        title: '订单创建中...'
      })
      payApi.orderTopic({'category_id': categoryId, 'casing_id': casingId}).then((orderNo) => {
        uni.hideLoading()
        if (orderNo) {
          that.clientTransferPay(orderNo,'',this.vipUrl)
        }
      }).catch((e) => {
        console.log('payApi', e)
        uni.hideLoading()
      })
    },
    changePayItem(index) {
      this.payIndex = index
    },
    changePay(number) {
      this.payType = number
    },
  }
}
</script>

<style scoped>
.kaitong {
  width: 660rpx;
  height: 80rpx;
  border-radius: 80rpx;
  background-color: #3E8EFE;
}

.vip-box {
  width: 200rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-bottom: 30rpx;
}

.vip-item {
  width: 200rpx;
  height: 184rpx;
  padding-top: 66rpx;
  border: solid 1px #eaeaea;
  border-radius: 20rpx;
  position: relative;
  color: #666;
}

.vip-item-on {
  border-color: #f96b28;
  color: #222;
}

.vip-item-on .font26 {
  color: #f96b28;
}

.vip-item-on .font-bold {
  color: #f96b28;
}
</style>

